import * as maptalks from 'maptalks';

export class DrawControl extends maptalks.control.Control {
  buildOn() {
    const creat = (v, title, call) => {
      const t = maptalks.DomUtil.createEl('a');
      t.innerHTML = `<i class="q-icon material-icons q-item-icon">${v}</i>`;
      t.onclick = call;
      t.title = title;
      return t;
    };
    const m = this.getMap();
    const layer = new maptalks.VectorLayer('DrawTool').addTo(m);

    const drawTool = new maptalks.DrawTool({
      mode: 'Point',
      arrowStyle: null, // arrow-style : now we only have classic
      arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
      visible: true,
      editable: true,
      cursor: null,
      shadowBlur: 0,
      shadowColor: 'black',
      draggable: false,
      dragShadow: false, // display a shadow during dragging
      drawOnAxis: null, // force dragging stick on a axis, can be: x, y
      symbol: {
        lineColor: '#1bbc9b',
        lineWidth: 3,
      },
    }).addTo(m).disable();

    function resetLayer(options) {
      while (options.result.length > 0) {
        options.result.pop();
      }
      options.line = null;
      options.polygon = null;
      layer.clear();
    }

    drawTool.on('drawend', (param) => {
      const { coordinates } = param.geometry.toGeoJSON().geometry;
      this.options.result.push(coordinates);
      if (coordinates && coordinates.length > 0) {
        const lastGeo = this.options.toolType === 'drawPoint' ? coordinates : coordinates[coordinates.length - 1];
        this.options.geoCoder(lastGeo[0], lastGeo[1]);
      }
      if (this.options.toolType === 'drawPoint') {
        const point = new maptalks.Marker(coordinates);
        layer.addGeometry(point);
      } else if (this.options.toolType === 'drawPolygon') {
        this.options.polygon = new maptalks.Polygon(coordinates, {
          symbol: {
            lineColor: '#1bbc9b',
            lineWidth: 3,
            polygonFill: '#fff',
            polygonOpacity: 0.5,
          },
        });
        layer.addGeometry(this.options.polygon);
      } else if (this.options.toolType === 'drawLine') {
        this.options.line = new maptalks.LineString(coordinates, {
          symbol: {
            lineColor: '#1bbc9b',
            lineWidth: 3,
          },
        });
        layer.addGeometry(this.options.line);
      }
      this.options.toolType = '';
      drawTool.disable();
    });
    const control = {
      drawPoint: creat('location_on', '选点', () => {
        resetLayer(this.options);
        this.options.toolType = 'drawPoint';
        drawTool.setMode('Point').enable();
      }),
      drawLine: creat('swap_calls', '画线', () => {
        resetLayer(this.options);
        this.options.toolType = 'drawLine';
        drawTool.setMode('LineString').enable();
      }),
      drawPolygon: creat('crop_landscape', '画面', () => {
        resetLayer(this.options);
        this.options.toolType = 'drawPolygon';
        drawTool.setMode('LineString').enable();
      }),
      edit: creat('edit', '编辑', () => {
        if (!this.options.startEdit) {
          if (this.options.line) {
            this.options.line.startEdit();
          }
          if (this.options.polygon) {
            this.options.polygon.startEdit();
          }
        } else {
          // 这里实现保存
          if (this.options.line) {
            this.options.line.endEdit();
            while (this.options.result.length > 0) {
              this.options.result.pop();
            }
            this.options.result.push(this.options.line.toGeoJSON().geometry.coordinates);
          }
          if (this.options.polygon) {
            this.options.polygon.endEdit();
            while (this.options.result.length > 0) {
              this.options.result.pop();
            }
            this.options.result.push(this.options.polygon.toGeoJSON().geometry.coordinates);
          }
        }
        this.options.startEdit = !this.options.startEdit;
      }),
      reset: creat('clear', '清空图层', () => {
        resetLayer(this.options);
      }),
    };

    const dom = maptalks.DomUtil.createEl('div', 'map_m_c');
    this.options.control.forEach((v) => dom.appendChild(control[v]));
    return dom;
  }
}
